import { useEffect, useState } from 'react'

import 'animate.css'

const YourComponent = () => {
  const [playAnimation, setPlayAnimation] = useState(false)

  useEffect(() => {
    startAnimation()
  }, [])
  useEffect(() => {
    const aa = setInterval(() => {
      startAnimation()
    }, 5000)
    return () => {
      window.clearInterval(aa)
    }
  }, [])

  const startAnimation = () => {
    setPlayAnimation(true)
    setTimeout(() => {
      setPlayAnimation(false)
    }, 5000) // 5秒后停止动画
  }

  return (
    <div
      className={playAnimation ? 'animate__animated animate__fadeInLeft' : ''}
    >
      xxxxxx
    </div>
  )
}

export default YourComponent
